<script setup lang="ts">
import BackToTop from "@/components/common/BackToTop.vue";
import BlogTag from "@/components/BlogTag.vue";
import CategoryTag from "@/components/CategoryTag.vue";
import {onMounted, ref, watch,defineAsyncComponent} from "vue";
import {articleApi} from "@/api/blog/articleApi.ts";
import SvgIcon from "@/components/common/SvgIcon.vue";
// import ArticleCard from "@/components/article/ArticleCard.vue";
// import MarkdownCard from "@/components/article/MarkdownCard.vue";
// import DirectoryComponent from "@/components/article/directory/DirectoryComponent.vue";
const MarkdownCard = defineAsyncComponent(() => import("@/components/article/MarkdownCard.vue"))
const DirectoryComponent = defineAsyncComponent(() => import("@/components/article/directory/DirectoryComponent.vue"))
const ArticleCard = defineAsyncComponent(() => import("@/components/article/ArticleCard.vue"))
import {userApi} from "@/api/blog/userApi.ts";
import {TreeNode} from "@/types/treeType.ts";
const article = ref<Article>({} as Article)
const user = ref<User>({} as User)
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const articleList = ref()
const getArticleList = (article:Partial<ArticleSearch>) => {
  articleApi.getArticlePage(article).then((res)=>{
    articleList.value = res.data.records
  })
}
const treeNode = ref<TreeNode[]>()
const getToc = (treeData:TreeNode) => {
  treeNode.value = treeData.children
}
onMounted(()=>{
  setArticle(Number(props.id))
})
watch(() => props.id, (newArticleId) => {
  setArticle(Number(newArticleId))
})
function setArticle(articleId:number) {
  articleApi.getArticleDetail(articleId).then(res=>{
    article.value = res.data
    // 更新作者信息
    setUserDetail(article.value.userId)
    // 更新文章列表
    getArticleList({current:1, size:3,id:articleId, categoryId:article.value.categoryId})
  })
}
function setUserDetail(userId:number) {
  userApi.getUserDetail(userId).then(res=>{
    user.value = res.data
  })
}
</script>

<template>
  <div class="article-info">
    <div class="article-info-header">
      <div class="article-info-title">
        {{ article.title }}
      </div>
      <div class="article-info-other">
        <div class="article-info-time">
          <SvgIcon class-name="icon" icon-class="发布日期" />
          {{ article.createTime }}
        </div>
        <div class="article-info-statistics">
          <ul>
            <li>
              <SvgIcon class-name="icon" icon-class="点赞白" />
              {{ article.likeCount? article.likeCount:'0' }}
            </li>
            <li>
              <SvgIcon class-name="icon" icon-class="浏览量" />
              {{ article.viewCount? article.viewCount:'0' }}
            </li>
            <li>
              <SvgIcon class-name="icon" icon-class="收藏" />
              99+
            </li>
            <li>
              <SvgIcon class-name="icon" icon-class="评论白" />
              99+
            </li>
          </ul>
        </div>
      </div>
      <div class="article-info-tag">
        <CategoryTag :icon="article.categoryIcon" :text="article.categoryName" :color="article.iconColor"/>
        <BlogTag v-for="(tag,index) in article.tagNames" :key="index" :text="tag" />
      </div>
    </div>
    <div class="article-info-main">
      <div class="article-info-main-left">
        <div class="article-info-content">
          <MarkdownCard :content="article.articleContent" @get-toc="getToc"/>
        </div>
        <div class="article-info-footer">
          <div class="change-article" v-if="article.type==2">
            <div class="change-article-left" v-if="article.preArticle" @click="setArticle(article.preArticle.id)">
              <SvgIcon class-name="icon" icon-class="上一篇"/>
              <div class="previous-article">
                <div class="previous-article-title">
                  {{ article.preArticle.title }}
                </div>
                上一篇
              </div>
            </div>
            <div class="change-article-right" v-if="article.nextArticle" @click="setArticle(article.nextArticle.id)">
              <SvgIcon class-name="icon" icon-class="下一篇"/>
              <div class="next-article">
                <div class="next-article-title">
                  {{ article.nextArticle.title }}
                </div>
                下一篇
              </div>
            </div>
          </div>
          <div class="article-info-recommend">
            <div class="article-recommend-title">
              <span>推荐文章</span>
              <!-- TODO 需要跳转到分类页面 -->
              <div class="more" @click="getArticleList({current:1, size:20,id:article.id, categoryId:article.collectionId})">
                查看更多
                <SvgIcon class="icon" icon-class="箭头右"/>
              </div>
            </div>
            <div class="article-recommend-list">
              <ArticleCard v-for="item in articleList" :key="item.id" :article="item"/>
            </div>
          </div>
          <div class="article-info-comment">
          </div>
        </div>
      </div>
      <div class="article-info-main-right">
        <div class="article-info-author">
          <div class="article-info-author-info">
            <div class="article-info-author-avatar">
              <img v-lazy="user.avatar" alt="avatar">
            </div>
            <div class="article-info-author-name">
              <span>{{ user.nickname }}</span>
            </div>
          </div>
          <div class="article-info-author-statistics">
            <ul>
              <li>
                <span>{{ user.articleNum? user.articleNum:'-' }}</span>
                <span>文章数</span>
              </li>
              <li>
                <span>{{ user.likeNum? user.likeNum:'-' }}</span>
                <span>点赞数</span>
              </li>
              <li>
                <span>{{ user.collectNum? user.collectNum:'-' }}</span>
                <span>收藏数</span>
              </li>
              <li>
                <span>{{ user.commentNum? user.commentNum:'-' }}</span>
                <span>评论数</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="article-info-catalogue">
          <DirectoryComponent v-if="treeNode?.length" :title="article.title" :tree-data="treeNode"/>
        </div>
      </div>
    </div>
    <BackToTop />
  </div>
</template>

<style scoped lang="less">
.article-info {
  margin-top: -373px; /* 上移 373 像素 */
  //height: calc(100% - 373px); /* 高度减去 373 像素 */
  //transform: translate(0, -373px);
  .article-info-header{
    .article-info-title{
      height: 38px;
      mix-blend-mode: hard-light;
      color: #ffffff;
      font-weight: bold;
      font-size: 26px;
      letter-spacing: 4px;
      margin-bottom: 12px;
    }
    .article-info-other{
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .icon{
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
      .article-info-time{
        height: 20px;
        color: #ffffff;
        font-size: 14px;
        margin-right: 24px;
        display: flex;
        align-items: center;
      }
    }
    .article-info-statistics{
      ul{
        display: flex;
        list-style: none;
        color: #ffffff;
        li{
          display: flex;
          align-items: center;
          margin-right: 24px;
          font-size: 14px;
          .icon{
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
        }
      }
    }
    .article-info-tag{
      display: flex;
      align-items: center;
      .article-category{
        margin-right: 12px;
      }
      .tag {
        margin-left: 8px;
      }
    }
  }
  .article-info-main{
    display: flex;
    gap: 16px;
    //width: 100%;
    margin-top: 40px;
    .article-info-main-left{
      flex: 1;
      background-color: #ffffff;
      border-radius: 8px;
      overflow: hidden;
      .article-info-content{
        padding: 32px 48px;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: #e0e0e0;
        }
      }
      .article-info-footer{
        padding: 20px 48px 36px 48px;
        .change-article{
          display: flex;
          gap: 16px;
          justify-content: space-between;
          & > div{
            width: 426px;
            height: 68px;
            color: #666666;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-sizing: border-box;
            padding: 11px 16px;
            display: flex;
            align-items: center;
            .icon{
              width: 20px;
              height: 20px;
              color: #EB5C88;
            }
            & > div{
              display: flex;
              flex-direction: column;
              & > div{
                color: #333333;
                font-weight: bold;
                font-size: 16px;
                line-height: 23px;
              }
            }
          }
          .change-article-left{
            margin-right: auto; /* 默认左对齐 */
            flex-direction: row;
            & > div{
              margin-left: 10px;
            }
          }
          .change-article-right{
            margin-left: auto; /* 强制右对齐 */
            flex-direction: row-reverse;
            & > div{
              margin-right: 10px;
            }
          }
        }
        .article-info-recommend{
          .article-recommend-title {
            margin: 24px 0;
            display: flex;
            justify-content: space-between;
            & > span {
              font-size: 20px;
              font-weight: bold;
              letter-spacing: 4px;
              color: #18191C;
            }
            .more{
              display: flex;
              align-items: center;
              font-size: 14px;
              text-align: center;
              color: #666666;
              .icon{
                width: 16px;
                height: 16px;
              }
              &:hover{
                color: #EB5C88;
                cursor: pointer;
              }
            }
          }
          .article-recommend-list{
            width: 100%;
            margin-top: 16px;
            /* grid布局 两端对齐,最后一行左对齐*/
            display: grid;
            /* 1fr | px 这是将网格分为几列，1fr是自适配单位，可以当成栅格*/
            grid-template-columns: 1fr 1fr 1fr;
            gap: 17px;
          }
        }
      }
    }
    .article-info-main-right{
      width: 300px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      .article-info-author{
        background: #ffffff;
        border-radius: 8px;
        padding: 20px 24px;
        .article-info-author-info{
          display: flex;
          align-items: center;
          gap: 16px;
          .article-info-author-avatar{
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            & > img{
              width: 100%;
              height: 100%;
            }
          }
          .article-info-author-name{
            font-weight: 500;
            font-size: 16px;
            line-height: 23px;
            color: #333333;
          }
        }
        .article-info-author-statistics{
          margin-top: 20px;
          ul{
            list-style: none;
            display: flex;
            gap: 28px;
            li{
              display: flex;
              align-items: center;
              flex-direction: column;
              gap: 4px;
              & > span:first-child{
                color: #333333;
                font-size: 16px;
                font-weight: 500;
                line-height: 23px;
              }
              & > span:last-child{
                color: #999999;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
              }
            }
          }
        }
      }
      .article-info-catalogue{
        // 要求当如果当前位置不在顶部时，仍然固定在顶部
        position: sticky; // 粘性定位
        top: 60px; // 偏移顶部距离
      }
    }
  }
}
</style>
